/*
 * @Author: 老刘
 * @Date: 2020-04-29 15:51:38
 * @Description: 多图表渲染
 */
import { initializationEcharts } from '../../../utils/util.js';
import { chartInfo, chartInfo1 } from './chart_data.js';
import * as echarts from '../../../utils/echarts';
Page({
	data: {
		currentIndex: 0,
		flowDetailsInfo: {},
		weChatDeductionList: {}, // 微信代扣流水
		bankDeductionList: {}, // 银行代扣流水
		weChatPassageNumberList: {}, // 微信通行笔数
		transactionList: undefined,
		ec: {
			lazyLoad: true
		}
	},
	onShow () {
		// 请求数据,渲染图表
		this.echartsComponnetComprehensive = this.selectComponent('#mychart-dom-comprehensive');
		this.echartsComponnetCurve = this.selectComponent('#mychart-dom-curve');
		if (this.data.currentIndex === 1) {
			this.getEcharts2Details();
		} else {
			this.getEcharts1Details();
		}
	},
	// 初始化图表
	initEcharts () {
		initializationEcharts(this.echartsComponnetComprehensive, echarts, this.getOptionComprehensive());
		initializationEcharts(this.echartsComponnetCurve, echarts, this.getOption());
	},
	onClickHandle (e) {
		let index = parseInt(e.currentTarget.dataset.index);
		if (index === this.data.currentIndex) {
			return;
		}
		this.setData({
			currentIndex: index
		});
		// 请求数据,渲染图表
		this.echartsComponnetCurve = this.selectComponent('#mychart-dom-curve');
		if (index === 1) {
			this.getEcharts2Details();
		} else {
			this.getEcharts1Details();
		}
	},
	getEcharts1Details () {
		const res = chartInfo;
		let list = res.data.details;
		this.data.flowDetailsInfo = res.data;
		this.changeKey(list);
	},
	changeKey (arr) {
		let bankDeductionList = [];
		let weChatDeductionList = [];
		let bankPassageNumberList = [];
		let weChatPassageNumberList = [];
		let dateList = [];
		arr.forEach((item, index) => {
			bankDeductionList.push(item.alwaysToAlwaysAmount); // 当日总对总金额
			weChatDeductionList.push(item.centToCentAmount); // 当日分对分金额
			bankPassageNumberList.push(item.alwaysToAlwaysNum); // 当日总对笔数
			weChatPassageNumberList.push(item.centToCentNum); // 当日分对分笔数
			if (item.date.length > 8) {
				dateList.push(item.date.substring(8, 10));
			} else {
				dateList.push(item.date.substring(5, 7));
			}
		});
		this.setData({
			weChatDeductionList: weChatDeductionList,
			bankDeductionList: bankDeductionList,
			weChatPassageNumberList: weChatPassageNumberList,
			bankPassageNumberList: bankPassageNumberList,
			dateList: dateList
		});
		this.initEcharts();
	},
	getEcharts2Details () {
		const res = chartInfo1;
		let list = res.data.details;
		this.data.flowDetailsInfo = res.data;
		this.change2Key(list);
	},
	change2Key (arr) {
		let bankDeductionList = [];
		let weChatDeductionList = [];
		let dateList = [];
		arr.forEach((item) => {
			bankDeductionList.push(item.currentDateAmount); // 当前金额（万元）
			weChatDeductionList.push((item.currentDateCount / 10000).toFixed(2)); // 当前订单数量 -绿色
			if (item.date.length > 8) {
				dateList.push(item.date.substring(8, 10));
			} else {
				dateList.push(item.date.substring(5, 7));
			}
		});
		this.setData({
			weChatDeductionList: weChatDeductionList,
			bankDeductionList: bankDeductionList,
			dateList: dateList,
			flowDetailsInfo: this.data.flowDetailsInfo
		});
		this.initEcharts();
	},
	// 获取数据
	getOption () {
		let that = this;
		let option = {
			color: ['#FFFFFF','rgba(255,255,255,0.48)'],// 白色代表：微信代扣流水  	浅白色代表：银行扣费的流水
			tooltip: {
				trigger: 'axis',
				confine: 'true', // 限制在显示框里
				formatter (params) {
					let data = that.data.flowDetailsInfo.details[params[0].dataIndex];
					return `${data.date}
							银行扣费笔数:${data.alwaysToAlwaysNum}
							微信扣费笔数:${data.centToCentNum}`;
				}
			},
			grid: {
				left: 15, // y轴偏移量
				top: '5%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				// x轴的颜色和宽度
				axisLine: {
					lineStyle: {
						color: '#66666D',
						width: 0 // 坐标轴的宽度
					}
				},
				// 去除刻度线
				axisTick: {
					show: false
				},
				// x轴的字体样式
				axisLabel: {
					show: true,
					textStyle: {
						color: '#fff',
						fontSize: '13'
					}
				},
				// 控制网格线是否显示
				splitLine: {
					show: false
				},
				data: this.data.dateList // 日期 || 月份
			},
			yAxis: {
				axisLine: {
					show: false
				},
				// 去除刻度线
				axisTick: {
					show: false
				},
				// 控制网格线是否显示
				splitLine: {
					show: false
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#fff',
						fontSize: '13'
					}
				},
				boundaryGap: false,
				type: 'value'
			},
			dataZoom: [// 数据区域缩放
				{
					show: false,// 是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
					startValue: this.data.dateList.length - 7
				},
				{type: 'inside'}
			],
			series: [{
				name: '微信扣费的笔数',
				data: this.data.weChatPassageNumberList,
				type: 'line',
				symbol: 'none',// 去掉圆点
				smooth: true
			},{
				name: '银行扣费的笔数',
				data: this.data.bankPassageNumberList,
				type: 'line',
				symbol: 'none',// 去掉圆点
				smooth: true
			}
			]
		};
		if (that.data.currentIndex === 1) {
			let mtclist = [];
			that.data.flowDetailsInfo.details.map(item => {
				mtclist.push(item.currentDateCount);
			});
			option.series = [
				{
					name: '微信扣费的笔数',
					data: mtclist,
					type: 'line',
					symbol: 'none',// 去掉圆点
					smooth: true
				}
			];
			option.tooltip = {
				trigger: 'axis',
				confine: 'true', // 限制在显示框里
				formatter (params) {
					let data = that.data.flowDetailsInfo.details[params[0].dataIndex];
					return `${data.date}
							通行笔数:${data.currentDateCount}`;
				}
			};
		}
		return option;
	},
	// 获取数据
	getOptionComprehensive () {
		let that = this;
		let option = {
			color: ['#2FB565','#D8D8D8'],//   	绿色代表：微信扣费的流水  灰色代表：银行扣费的流水
			grid: {
				top: 15,
				left: 0,
				bottom: '3%',
				containLabel: true
			},
			tooltip: {
				trigger: 'axis',
				confine: 'true', // 限制在显示框里
				formatter (params) {
					let data = that.data.flowDetailsInfo.details[params[0].dataIndex];
					if (data.hasOwnProperty('centToCentAmount')) {
						return `${data.date}
							微信扣费金额:${data.centToCentAmount}
							银行扣费金额:${data.alwaysToAlwaysAmount}`;
					} else {
						return `${data.date}
							扣费金额:${data.currentDateAmount}
							扣费笔数:${data.currentDateCount}`;
					}
				}
			},
			xAxis: [
				{
					boundaryGap: false,
					// x轴的颜色和宽度
					axisLine: {
						lineStyle: {
							color: '#66666D',
							width: 0 // 坐标轴的宽度
						}
					},
					// 去除刻度线
					axisTick: {
						show: false
					},
					// x轴的字体样式
					axisLabel: {
						show: true,
						textStyle: {
							color: '#66666D',
							fontSize: '13'
						}
					},
					// 控制网格线是否显示
					splitLine: {
						show: false
					},
					type: 'category',
					data: this.data.dateList
				}
			],
			yAxis: [
				{
					type: 'value',
					// show: false
					// 去除刻度线
					axisTick: {
						show: false
					},
					axisLabel: {
						formatter: '¥{value}万元'
					},
					axisLine: {
						lineStyle: {
							color: '#66666D',
							width: 0 // 坐标轴的宽度
						}
					}
				}
			],
			dataZoom: [// 数据区域缩放
				{
					show: false,// 是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
					startValue: this.data.dateList.length - 7
				},
				{type: 'inside'}
			],
			series: [
				{
					name: '微信扣费的流水',
					type: 'bar',
					stack: '流水',
					barWidth: 13,
					data: this.data.weChatDeductionList
				},
				{
					name: '银行扣费的流水',
					type: 'bar',
					stack: '流水',
					barWidth: 13,
					data: this.data.bankDeductionList
				}
			]
		};
		return option;
	}
});
